<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blanchard художественная галерея</title>

  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/media.css">

  <link rel="shortcut icon" href="img/logo-mini.png">
</head>
<body>
  <header class="header flex">
    <div class="header__wraper container flex">
      <a href="#" class="header__logo logo">
        <img src="img/logo.svg" alt="logo">
      </a>
      <nav class="header__nav nav">
        <ul class="nav__list list-reset flex">
          <li class="nav__item">
            <a href="#1" class="nav__link">О нас</a>
          </li>
          <li class="nav__item">
            <a href="#2" class="nav__link">Галерея</a>
          </li>
          <li class="nav__item">
            <a href="#3" class="nav__link">Каталог</a>
          </li>
          <li class="nav__item">
            <a href="#4" class="nav__link">События</a>
          </li>
          <li class="nav__item">
            <a href="#5" class="nav__link">Проекты</a>
          </li>
          <li class="nav__item">
            <a href="#6" class="nav__link">Контакты</a>
          </li>
        </ul>
      </nav>
      <button aria-label="поиск" class="bttn-reset header__search ">
        <svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
          <rect width="8.79564" height="2.19891" transform="matrix(-0.711314 0.702874 0.711314 0.702874 6.25647 20.2722)" />
          <path fill-rule="evenodd" clip-rule="evenodd" d="M15.3286 23.3112C9.54218 23.3112 5.06477 18.549 5.06477 12.9507C5.06477 7.35228 9.54218 2.59013 15.3286 2.59013C21.115 2.59013 25.5924 7.35228 25.5924 12.9507C25.5924 18.549 21.115 23.3112 15.3286 23.3112ZM15.3286 25.9013C8.33038 25.9013 2.6572 20.1031 2.6572 12.9507C2.6572 5.79821 8.33038 0 15.3286 0C22.3268 0 28 5.79821 28 12.9507C28 20.1031 22.3268 25.9013 15.3286 25.9013Z" />
          </svg>
      </button>
    </div>
  </header>
  <main>
      <section class="hero">
        <div class="container">
          <div class="hero__inf">
            <h1 class="hero__title">Прикоснитесь к прекрасному</h1>
          <p class="hero__descr">Мы&nbsp;вынуждены отталкиваться от&nbsp;того, что реализация намеченных плановых заданий создаёт предпосылки для новых предложений</p>
          <button class="bttn-reset hero__btn">Подписаться на рассылку</button>
          </div>
        </div>
      </section>
      <section id="1" class="abus container">
        <h2 class="abus__title">О нас</h2>
        <p class="abus__descr">
          Ясность нашей позиции очевидна: семантический разбор внешних противодействий однозначно определяет каждого участника как способного принимать собственные решения касаемо распределения внутренних резервов и&nbsp;ресурсов. Не&nbsp;следует, однако, забывать, что высококачественный прототип будущего проекта влечёт за&nbsp;собой процесс внедрения и&nbsp;модернизации модели развития. Повседневная практика показывает, что высокое качество позиционных исследований создаёт необходимость включения в&nbsp;производственный план целого ряда внеочередных мероприятий с&nbsp;учётом комплекса распределения внутренних резервов и&nbsp;ресурсов. В&nbsp;рамках спецификации современных стандартов, действия представителей оппозиции набирают популярность среди определённых слоёв населения, а&nbsp;значит, должны быть разоблачены.
        </p>
      </section>
      <section id="2" class="gallery">
        <div class="container flex gallery__con">
          <div class="gallery__main flex">
            <h2 class="gallery__title">Галерея</h2>
            <form action="https://jsonplaceholder.typicode.com/posts" method="post" class="gallery__form">
              <label class="gallery__wraper">
                <input type="radio" name="age" value="XIX век" class="gallery__radio"><span class="gallery__text">XIX век</span>
              </label>
              <label class="gallery__wraper">
                <input checked type="radio" name="age" value="XX век" class="gallery__radio"><span class="gallery__text">XX век</span>
              </label>
              <label class="gallery__wraper">
                <input type="radio" name="age" value="Современность" class="gallery__radio"><span class="gallery__text">Современность</span>
              </label>
            </form>
          </div>
          <ul class="list-reset gallery__pics flex">
            <li class="gallery__pic_1 gallery__pic">
              <img src="img/gal1.jpg" alt="art work">
            </li>
            <li class="gallery__pic_2 gallery__pic">
              <img src="img/gal2.jpg" alt="art work">
            </li>
            <li class="gallery__pic_3 gallery__pic">
              <img src="img/gal3.jpg" alt="art work">
            </li>
          </ul>
        </div>
      </section>
      <section id="3" class="cat container">
        <h2 class="cat__title">Каталог</h2>
        <p class="cat__descr">
          Акционеры крупнейших компаний, которые представляют собой яркий пример континентально-европейского типа политической культуры, будут объявлены нарушающими общечеловеческие нормы этики и&nbsp;морали. Являясь всего лишь частью общей картины, стремящиеся вытеснить традиционное производство, нанотехнологии и&nbsp;по&nbsp;сей день остаются уделом либералов, которые жаждут быть функционально разнесены на&nbsp;независимые элементы.
        </p>
        <ul class="list-reset cat__list">
          <li class="cat__item flex">
            <div class="cat__pic cat__pic_1">
              <img src="img/cat1.jpg" alt="art work">
            </div>
            <div class="cat__info flex">
              <h3 class="cat__name">Доменико Гирландайо</h3>
              <span class="cat__date">2&nbsp;июня 1448&ndash;11 января 1494</span>
              <p class="cat__text">Один из&nbsp;ведущих флорентийских художников Кватроченто, основатель художественной династии, которую продолжили его брат Давид и&nbsp;сын Ридольфо. Глава художественной мастерской, где юный Микеланджело в&nbsp;течение года овладевал профессиональными навыками. Автор фресковых циклов, в&nbsp;которых выпукло, со&nbsp;всевозможными подробностями показана домашняя жизнь библейских персонажей (в&nbsp;их&nbsp;роли выступают знатные граждане Флоренции в&nbsp;костюмах того времени).</p>
            </div>
          </li>
          <li class="cat__item flex">
            <div class="cat__pic cat__pic_2">
              <img src="img/cat2.jpg" alt="art work">
            </div>
            <div class="cat__info flex">
              <h3 class="cat__name">Андреа дель Верроккьо</h3>
              <span class="cat__date">1435&ndash;10 октября 1488</span>
              <p class="cat__text">Творческий путь молодого Андреа, как и&nbsp;многих знаменитых художников и&nbsp;скульпторов эпохи Возрождения, начался с&nbsp;обучения и&nbsp;работы в&nbsp;одной из&nbsp;ювелирных мастерских Флоренции. Там он&nbsp;занимался не&nbsp;только изготовлением драгоценных украшений, но&nbsp;и&nbsp;познавал основы живописи, пластики и&nbsp;архитектуры. Его первым учителем был Джулиано Веррокки, фамилию которого в&nbsp;несколько изменённом виде Андреа заимствовал для своего будущего псевдонима.</p>
            </div>
          </li>
          <li class="cat__item flex">
            <div class="cat__pic cat__pic_3">
              <img src="img/cat3.jpg" alt="art work">
            </div>
            <div class="cat__info flex">
              <h3 class="cat__name">Лоренцо ди Креди</h3>
              <span class="cat__date">1459–12 января 1537</span>
              <p class="cat__text">Один из&nbsp;ведущих флорентийских художников Кватроченто, основатель художественной династии, которую продолжили его брат Давид и&nbsp;сын Ридольфо. Глава художественной мастерской, где юный Микеланджело в&nbsp;течение года овладевал профессиональными навыками. Автор фресковых циклов, в&nbsp;которых выпукло, со&nbsp;всевозможными подробностями показана домашняя жизнь библейских персонажей (в&nbsp;их&nbsp;роли выступают знатные граждане Флоренции в&nbsp;костюмах того времени).</p>
            </div>
          </li>
        </ul>
     </section>
      <section id="4" class="sob container">
        <h2 class="sob__title">События</h2>
        <ul class="list-reset sob__list flex">
          <li class="sob__item">
            <div class="sob__pic sob__pic_1">
              <picture>
                <source srcset="img/sob1-lg.png" media="(max-width: 768px)">
                <source srcset="img/sob1-md.png" media="(max-width: 1024px)">
                <source srcset="img/sob1-lg.png" media="(max-width: 1400px)">

                <img src="img/sob1-xl.png" alt="">
            </picture>
            </div>
            <div class="sob__body flex">
              <div class="sob__wraper">
                <div class="sob__date">
                  <span class="sob__place">Музей им. Щусева
                    с&nbsp;20&nbsp;марта по&nbsp;30&nbsp;апреля</span>
                </div>
                <h3 class="sob__name">Книжная гравюра в&nbsp;живом восприятии</h3>
                <p class="sob__descr">Один из&nbsp;ведущих флорентийских художников Кватроченто, основатель художественной династии, которую продолжили его брат Давид и&nbsp;сын Ридольфо</p>
              </div>
              <a href="#" class="sob__link">Подробнее</a>
            </div>
          </li>
          <li class="sob__item">
            <div class="sob__pic sob__pic_2">
              <picture>
                <source srcset="img/sob2-lg.png" media="(max-width: 768px)">
                <source srcset="img/sob2-md.png" media="(max-width: 1024px)">
                <source srcset="img/sob2-lg.png" media="(max-width: 1400px)">

                <img src="img/sob2-xl.png" alt="">
            </picture>
            </div>
            <div class="sob__body flex">
              <div class="sob__wraper">
               <div class="sob__date">
                <span class="sob__place">ММОМА <br>
                  24&nbsp;марта 19:00</span>
               </div>
                <h3 class="sob__name">&laquo;Открытая дискуссия&raquo;. Дмитрий Петров и&nbsp;Сергей Ильин.</h3>
                <p class="sob__descr">Высокий уровень вовлечения представителей целевой аудитории является чётким доказательством простого факта</p>
              </div>
              <a href="#" class="sob__link">Подробнее</a>
            </div>
          </li>
          <li class="sob__item">
            <div class="sob__pic sob__pic_3">
              <picture>
                <source srcset="img/sob3-lg.png" media="(max-width: 768px)">
                <source srcset="img/sob3-md.png" media="(max-width: 1024px)">
                <source srcset="img/sob3-lg.png" media="(max-width: 1400px)">

                <img src="img/sob3-xl.png" alt="">
            </picture>
            </div>
            <div class="sob__body flex">
              <div class="sob__wraper">
                <div class="sob__date">
                  <span class="sob__place">Еврейский музей
                    с&nbsp;31&nbsp;марта по&nbsp;21&nbsp;апреля</span>
                </div>
                <h3 class="sob__name">Выставка &laquo;Формация 2020&raquo;</h3>
                <p class="sob__descr">Идейные соображения высшего порядка, а&nbsp;также современная методология разработки играет важную роль в&nbsp;формировании глубокомысленных рассуждений</p>
              </div>
              <a href="#" class="sob__link">Подробнее</a>
            </div>
          </li>
        </ul>
      </section>
      <section id="5" class="proj container">
        <h2 class="proj__title">Проекты</h2>
        <p class="proj__descr">Предварительные выводы: постоянное информационно-пропагандистское обеспечение нашей деятельности однозначно фиксирует необходимость своевременного выполнения сверхзадачи. А&nbsp;ещё независимые государства смешаны с&nbsp;не&nbsp;уникальными данными до&nbsp;степени совершённой неузнаваемости, из-за чего возрастает их&nbsp;статус бесполезности. Прежде всего, постоянное информационно-пропагандистское обеспечение нашей деятельности однозначно фиксирует необходимость экономической целесообразности принимаемых решений. И&nbsp;нет сомнений, что действия представителей оппозиции могут быть рассмотрены исключительно в&nbsp;разрезе маркетинговых и&nbsp;финансовых предпосылок. Банальные, но&nbsp;неопровержимые выводы, а&nbsp;также представители современных социальных резервов призывают нас к&nbsp;новым свершениям, которые, в&nbsp;свою очередь, должны быть смешаны с&nbsp;не&nbsp;уникальными данными до&nbsp;степени совершённой неузнаваемости.</p>
        <h3 class="proj__part">Партнёры проектов:</h3>
        <ul class="list-reset proj__list flex">
          <li class="proj__logos">
            <img src="img/part1.png" alt="Freelands Found. logo">
          </li>
          <li class="proj__logos">
            <img src="img/part2.png" alt="Institute for Contemporary Art logo">
          </li>
        </ul>
      </section>
      <section id="6" class="contacts">
        <div class="container flex contacts__con">
          <div class="contacts__left">
            <h3 class="contacts__title">Шоурум &#8470;&nbsp;4</h3>
            <address class="contacts__address">Леонтьевский переулок, дом 5/1</address>
          </div>
          <form class="contacts__form" action="https://jsonplaceholder.typicode.com/posts" method="post">
            <input required placeholder="Имя*" type="text" class="form contacts__name">
            <input required placeholder="Телефон*" type="tel" class="form contacts__tel">
            <button class="bttn-reset contacts__btn"  type="submit" value="Отправить" >
              <span class="hidden-on-small">Заказать обратный звонок</span>
              <span class="visible-on-small">Заказать</span>
            </button>
          </form>
          <div class="contacts__right">
            <h3 class="contacts__links">Связаться в&nbsp;один клик</h3>
            <ul class="list-reset flex">
              <li>
                <a href="#" class="contacts__link contacts__link_wa contacts__link_wa_act">
                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191243_544)">
                    <path d="M38.875 20C38.875 30.4244 30.4244 38.875 20 38.875C9.57563 38.875 1.125 30.4244 1.125 20C1.125 9.57563 9.57563 1.125 20 1.125C30.4244 1.125 38.875 9.57563 38.875 20Z" fill="#30BF39" />
                    <path d="M25.8749 21.7509C25.6249 21.6259 24.3124 20.8759 24.0624 20.8134C23.8124 20.6884 23.6249 20.6884 23.4374 20.9384C23.2499 21.1884 22.6874 21.8134 22.5624 21.9384C22.3749 22.1259 22.2499 22.1259 21.9999 22.0009C21.7499 21.8759 20.8749 21.5634 19.8749 20.5634C19.1249 19.8134 18.5624 18.9384 18.4374 18.6259C18.3124 18.3759 18.4374 18.1884 18.5624 18.0634C18.6874 17.9384 18.8124 17.7509 18.9999 17.6259C19.1874 17.5009 19.1874 17.3759 19.3124 17.1884C19.4374 17.0009 19.3749 16.8759 19.3124 16.6884C19.2499 16.5009 18.7499 15.1884 18.5624 14.6259C18.3749 14.0634 18.1249 14.1884 17.9999 14.1259C17.8124 14.1259 17.6874 14.0634 17.4999 14.0634C17.2499 14.0634 16.9374 14.1884 16.7499 14.3759C16.4999 14.6259 15.7499 15.2509 15.7499 16.5634C15.7499 17.8759 16.6249 19.2509 16.7499 19.3759C16.8749 19.5634 18.4999 22.4384 21.1874 23.6259C23.8749 24.8134 23.8749 24.4384 24.3749 24.4384C24.8749 24.4384 25.9999 23.8134 26.2499 23.2509C26.4999 22.6259 26.4999 22.0634 26.4374 22.0009C26.3124 22.0009 26.1249 21.9384 25.8749 21.7509ZM20.8749 28.1884C19.1249 28.1884 17.4999 27.6884 16.0624 26.7509L12.6874 27.8134L13.8124 24.5634C12.7499 23.0634 12.1249 21.2509 12.1249 19.3759C12.1249 14.5009 16.0624 10.5634 20.9374 10.5634C25.8124 10.5634 29.6874 14.5009 29.6874 19.3759C29.6874 24.2509 25.7499 28.1884 20.8749 28.1884ZM20.8749 8.81335C15.0624 8.81335 10.3124 13.5634 10.3124 19.3759C10.3124 21.3134 10.8124 23.1884 11.8124 24.8134L9.87488 30.5009L15.7499 28.6259C17.3124 29.5009 19.0624 29.9384 20.8749 29.9384C26.6874 29.9384 31.4374 25.1884 31.4374 19.3759C31.4374 13.5634 26.7499 8.81335 20.8749 8.81335Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_191243_544">
                    <rect width="40" height="40" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                </a>
              </li>
              <li>
                <a href="#" class="contacts__link contacts__link_tm contacts__link_tm_act">
                  <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g clip-path="url(#clip0_191243_651)">
                    <path d="M38.875 20C38.875 30.4244 30.4244 38.875 20 38.875C9.57563 38.875 1.125 30.4244 1.125 20C1.125 9.57563 9.57563 1.125 20 1.125C30.4244 1.125 38.875 9.57563 38.875 20Z" fill="#26A5E4" />
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M9.05308 19.7889L20.7167 14.7649C26.2709 12.4547 27.425 12.0534 28.1772 12.0402C28.3427 12.0373 28.7126 12.0783 28.9522 12.2727C29.1546 12.4369 29.2102 12.6587 29.2369 12.8143C29.2636 12.9699 29.2967 13.3246 29.2704 13.6017C28.9694 16.7641 27.667 24.4386 27.0044 27.9806C26.724 29.4794 26.1724 29.9819 25.6376 30.0311C24.4762 30.138 23.5942 29.2635 22.4693 28.5261L18.006 25.528C16.0313 24.2268 17.3114 23.5116 18.4368 22.3428C18.7312 22.0368 23.8486 17.3823 23.9476 16.96C23.9596 16.9072 23.9714 16.7104 23.8545 16.6064C23.7376 16.5024 23.5649 16.5384 23.4404 16.5663C23.2639 16.6064 20.4518 18.465 15.0043 22.1423C14.2061 22.6904 13.4831 22.9575 12.8354 22.9435C12.1213 22.9281 10.7476 22.5397 9.72648 22.2078C8.47396 21.8007 7.47848 21.5854 7.5652 20.8939C7.61032 20.5338 8.10628 20.1655 9.05304 19.789L9.05308 19.7889Z" fill="white"/>
                    </g>
                    <defs>
                    <clipPath id="clip0_191243_651">
                    <rect width="40" height="40" fill="white"/>
                    </clipPath>
                    </defs>
                  </svg>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </section>
  </main>
  <footer class="footer">
    <div class="footer__wraper container flex">
      <a href="#" class="footer__logo">
        <img src="img/logo.svg" alt="logo">
      </a>
      <ul class="list-reset footer__social flex">
        <li class="footer__link_vk">
          <a href="#" class="footer__link ">
            <svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
              <path d="M22.5 0C10.074 0 0 10.0736 0 22.5C0 34.9264 10.074 45 22.5 45C34.926 45 45 34.9264 45 22.5C45 10.0736 34.926 0 22.5 0ZM33.9132 24.9335C34.9619 25.9577 36.0714 26.9217 37.0128 28.0519C37.4299 28.5519 37.823 29.0688 38.1222 29.6503C38.5495 30.4794 38.1637 31.3886 37.4216 31.4379L32.812 31.4369C31.6215 31.5354 30.6741 31.0553 29.8754 30.2414C29.2378 29.5927 28.6462 28.8999 28.0321 28.2292C27.7812 27.9539 27.517 27.6947 27.2021 27.4907C26.5737 27.0819 26.0277 27.2072 25.6677 27.8636C25.3008 28.5316 25.217 29.2719 25.182 30.0153C25.1319 31.1022 24.8041 31.3863 23.7135 31.4374C21.3832 31.5465 19.1721 31.1929 17.117 30.0181C15.3041 28.9818 13.901 27.5193 12.6783 25.8634C10.2973 22.6353 8.47381 19.0924 6.8354 15.4478C6.46665 14.627 6.73642 14.1878 7.64194 14.1707C9.14639 14.1417 10.6508 14.1454 12.1553 14.1694C12.7676 14.179 13.1727 14.5294 13.4079 15.1071C14.2209 17.1074 15.2176 19.0105 16.4665 20.7755C16.7994 21.2455 17.1391 21.7142 17.623 22.0461C18.157 22.4125 18.5639 22.2915 18.8158 21.6953C18.9769 21.3164 19.0464 20.9113 19.0814 20.5053C19.2011 19.1145 19.2153 17.7242 19.0082 16.339C18.8793 15.4722 18.3918 14.9124 17.5277 14.7485C17.0876 14.6652 17.152 14.5022 17.3661 14.2508C17.7376 13.8163 18.0856 13.5474 18.7812 13.5474L23.9893 13.5465C24.8101 13.7076 24.9942 14.0759 25.1056 14.9027L25.1102 20.6903C25.1006 21.0103 25.2709 21.9586 25.8454 22.1681C26.3058 22.32 26.6096 21.9508 26.8849 21.6594C28.1339 20.334 29.0237 18.7697 29.8206 17.1506C30.1723 16.4366 30.4757 15.6978 30.7703 14.9575C30.9895 14.4101 31.3301 14.1408 31.9479 14.15L36.9631 14.156C37.1108 14.156 37.2609 14.1574 37.4073 14.1827C38.2525 14.3273 38.4841 14.6909 38.2226 15.5154C37.811 16.8109 37.0114 17.89 36.2297 18.9718C35.3919 20.1301 34.4983 21.2478 33.6687 22.4111C32.9064 23.4746 32.9667 24.01 33.9132 24.9335Z" />
            </svg>
          </a>
        </li>
        <li class="footer__link_ok">
          <a href="#" class="footer__link ">
            <svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.279 14.9859C19.279 16.8409 20.7828 18.3449 22.6379 18.3449C24.4929 18.3449 25.9967 16.8409 25.9967 14.9859C25.9967 13.1309 24.4929 11.6271 22.6379 11.6271C20.7828 11.6271 19.279 13.1309 19.279 14.9859Z" />
              <path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 45C34.9264 45 45 34.9264 45 22.5C45 10.0736 34.9264 0 22.5 0C10.0736 0 0 10.0736 0 22.5C0 34.9264 10.0736 45 22.5 45ZM14.5125 14.9858C14.5125 10.4984 18.1503 6.86047 22.6379 6.86047C27.1254 6.86047 30.7632 10.4984 30.7632 14.9858C30.7632 19.4734 27.1254 23.1115 22.6379 23.1115C18.1503 23.1115 14.5125 19.4734 14.5125 14.9858ZM30.8117 27.291C30.7086 27.3737 28.7593 28.9142 25.5064 29.5769L30.4165 34.4432C31.28 35.3053 31.2811 36.7042 30.419 37.5677C29.5569 38.431 28.1583 38.4324 27.2945 37.5701L22.5276 32.928L18.1979 37.5402C17.7644 37.9899 17.1862 38.216 16.6074 38.216C16.0553 38.216 15.5027 38.0106 15.074 37.5972C14.1956 36.7502 14.1701 35.3516 15.0171 34.4733L19.6777 29.6025C16.3336 28.9555 14.3039 27.3749 14.1993 27.291C13.2475 26.5277 13.0946 25.1372 13.8579 24.1852C14.6212 23.2334 16.0115 23.0805 16.9636 23.8437C16.9837 23.86 19.1067 25.4549 22.5275 25.4572C25.9483 25.4549 28.0273 23.86 28.0474 23.8437C28.9995 23.0805 30.3899 23.2334 31.1531 24.1852C31.9165 25.1372 31.7636 26.5277 30.8117 27.291Z" />
            </svg>
          </a>
        </li>
      </ul>
    </div>
  </footer>
</body>
</html>
